<script setup lang="ts">
import { ref, reactive, defineOptions, onMounted } from "vue";
import { useFetch } from '@vueuse/core'
import { debounce } from 'radash'
import { computed } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { OfficialCharactersInfo, createOfficialRole, getOfficialCharacters, getThirdChannlRoleInformation, mergeRole } from "@/api/characters";
import { message } from "@/utils/message";
import { ElAlert, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import { watch } from 'vue'
defineOptions({ name: "characters" })
const env = import.meta.env
/**
 * 官网
 */
const officalInfoFormRef = ref<FormInstance>()
const officalInfo = reactive<OfficialCharactersInfo>({
  bountygold: 0,
  currency8: 0,
  guizuLv: 0,
  gold: 0,
  roleid: 0,
  rolename: "",
  danlv: 0
});
const officalInfoRule = reactive<FormRules<OfficialCharactersInfo>>({
  rolename: [
    { required: true, message: '请输入您的角色名', trigger: 'change' }
  ]
})
onMounted(() => {
  getOfficialCharacters()
    .then(({ data }) => {
      Object.assign(officalInfo, data)
    })
})
async function createORRename() {
  await officalInfoFormRef.value.validate()
  createOfficialRole({ name: officalInfo.rolename, serverid: 1 })
    .then(({ data }) => {
      message('创建成功', { type: 'success' })
    }, e => {
      message(e.message, { type: "error" })
    })
}





/**
 * 第三方信息
 */
const thridChannlePIN = ref(env.DEV ? "C7B49ADE36983DD1" : '');
const thridData = ref<OfficialCharactersInfo>(null)
const showThridChannelInfo = computed(() => !!thridData.value)
const getThridInfo = debounce({ delay: 300 }, () => {
  if (!thridChannlePIN.value) {
    thridData.value = null
    return
  }
  getOfficialCharacters(thridChannlePIN.value)
    .then(({ data }) => {
      if (Array.isArray(data) && !data.length) {
        thridData.value = null
      } else {
        thridData.value = data
      }
    }, e => {
      message(e.message, { type: 'error' })
    })
})
watch(thridChannlePIN, v => {
  getThridInfo()
})


function handleMerge() {
  ElMessageBox.alert('确定要合并吗？', '提示', {

  }).then(() => {
    mergeRole({ pin: thridChannlePIN.value }).then(({ data }) => {
      thridChannlePIN.value = ''
      message('合并成功', { type: 'success' })
    }, e => {
      message(e.message, { type: "error" })
    })
  })

}
</script>

<template>
  <div class="xl:flex  gap-4">
    <ElCard class="h-full xl:basis-full" header="官方渠道角色">
      <ElForm ref="officalInfoFormRef" label-position="top" :model="officalInfo" :rules="officalInfoRule">
        <ElFormItem prop="rolename">
          <ElRow>
            <ElCol :span="18">
              <ElInput placeholder="请输入您的角色名" v-model="officalInfo.rolename">
                <!--  <template #append>
                  <el-button type="primary">创角</el-button>
                </template> -->
              </ElInput>
            </ElCol>
            <ElCol :span="6">
              <el-button :disabled="!officalInfo.rolename" @click="createORRename" type="primary">{{ officalInfo.roleid
                ?
                '更改名字' : '创建角色' }}</el-button>
            </ElCol>
          </ElRow>
        </ElFormItem>
        <div v-if="!officalInfo.roleid" class="flex items-center text-sm mb-4">
          <IconifyIconOnline icon="mingcute:warning-line" /> <span> 当前您在官网游戏中暂无角色</span>
        </div>

      </ElForm>
      <ElDescriptions v-show="!!officalInfo.roleid" border title="角色信息">
        <ElDescriptionsItem label="渠道名">官方</ElDescriptionsItem>
        <ElDescriptionsItem label="游戏昵称">{{ officalInfo?.rolename }}</ElDescriptionsItem>
        <ElDescriptionsItem label="等级">{{ officalInfo?.guizuLv }}</ElDescriptionsItem>
        <ElDescriptionsItem label="排位等级">{{ officalInfo?.danlv }}</ElDescriptionsItem>
        <ElDescriptionsItem label="现有元宝">{{ officalInfo?.gold }}</ElDescriptionsItem>
        <ElDescriptionsItem label="现有金币">{{ officalInfo?.bountygold }}</ElDescriptionsItem>
        <ElDescriptionsItem label="峡">{{ officalInfo?.currency8 }}</ElDescriptionsItem>
        <!-- <ElDescriptionsItem label="券">{{ officalInfo }}</ElDescriptionsItem> -->

      </ElDescriptions>
    </ElCard>
    <ElCard class="h-full xl:basis-full" header="第三方渠道角色">
      <ElForm class="w-1/2" label-position="top">
        <ElFormItem>
          <ElRow>
            <ElCol :span="18">
              <ElInput placeholder="请输入您的角色PIN码" v-model="thridChannlePIN"></ElInput>
            </ElCol>
            <ElCol :span="6">
              <el-button type="primary" :disabled="!thridChannlePIN" @click="getThridInfo">查询</el-button>
            </ElCol>
          </ElRow>
        </ElFormItem>
      </ElForm>
      <ElDescriptions v-show="showThridChannelInfo" border title="角色信息">
        <template #extra>
          <el-button type="primary" @click="handleMerge">合并 </el-button>

          <el-popover placement="bottom" title="合并说明" :width="300" trigger="hover">
            2个角色的元宝、金元、刷新券相加<br /> 峡谷币取高者<br />段位等级取高者<br /> 贵族等级取高者<br /> 赛季卡开通状态、等级取高者<br /> 峡谷商城中的头像、头像框、名片底板、皮肤，去重合并
            <template #reference>
              <ElButton text :icon="useRenderIcon('mingcute:warning-line')"></ElButton>
            </template>
          </el-popover>
          <!-- <el-popover placement="bottom" title="角色己转移/合并" :width="200" trigger="hover">
            您的游戏角色已转移/合并至官网帐户【帐号显示】，请前往官网版本登陆游戏
            <template #reference>
              <ElButton text :icon="useRenderIcon('mingcute:warning-line')"></ElButton>
            </template>
          </el-popover> -->
          <!--  <el-popover placement="bottom" title="转移说明" :width="200" trigger="hover">
            角色转移后，所有数据将完美转移，不造成任何损失！
            <template #reference>
              <ElButton text :icon="useRenderIcon('mingcute:warning-line')"></ElButton>
            </template>
          </el-popover> -->


        </template>
        <ElDescriptionsItem label="渠道名">抖音</ElDescriptionsItem>
        <ElDescriptionsItem label="游戏昵称">{{ thridData?.rolename }}</ElDescriptionsItem>
        <ElDescriptionsItem label="等级">{{ thridData?.guizuLv }}</ElDescriptionsItem>
        <ElDescriptionsItem label="排位等级">{{ thridData?.danlv }}</ElDescriptionsItem>
        <ElDescriptionsItem label="现有元宝">{{ thridData?.gold }}</ElDescriptionsItem>
        <ElDescriptionsItem label="现有金币">{{ thridData?.bountygold }}</ElDescriptionsItem>
        <ElDescriptionsItem label="峡">{{ thridData?.currency8 }}</ElDescriptionsItem>
        <!-- <ElDescriptionsItem label="券">{{ thridData }}</ElDescriptionsItem> -->
      </ElDescriptions>
      <div class="mt-8"></div>
      <ElDescriptions v-show="!showThridChannelInfo" title="PIN码如何获得" :column="1">
        <ElDescriptionsItem label="1:">登陆游戏后打开“设置”界面，进入“隐私安全”选项</ElDescriptionsItem>
        <ElDescriptionsItem label="2:">在个人PIN码栏点击“生成”按钮</ElDescriptionsItem>
        <ElDescriptionsItem label="3:">输入财产安全锁密码，成功生成PIN码</ElDescriptionsItem>
        <ElDescriptionsItem label="4:">PIN码在生成后5分钟内有效，过期后需重新生成</ElDescriptionsItem>
      </ElDescriptions>
    </ElCard>

  </div>
</template>

<style lang="scss" scoped></style>
